<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0, shrink-to-fit=no">
  <link rel="head.png" href="/PNG/head.png"/>
  <title>欢迎使用领捷智慧物流管理系统</title>
  <link rel="hshortcut icon" href="../static/img/own/head.png"/>
  <link rel="stylesheet" href="/static/bootstrap/css/bootstrap.min.css">
  <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Nunito:200,200i,300,300i,400,400i,600,600i,700,700i,800,800i,900,900i">
  <link rel="stylesheet" href="/static/fonts/fontawesome-all.min.css">
</head>

<body>
<div id="wrapper">
  <div class="d-flex flex-column" id="content-wrapper">
    <div id="content">
      <div class="container-fluid">
        <input type="hidden" th:value="${orderid}" id="orderid">
        <input type="hidden" th:value="${goodsid}" id="goodsid">
        <input type="hidden" th:value="${num}" id="num">
        <div class="card shadow">
          <div class="card-header d-inline-flex py-3" style="height: 75px;">
            <div class="row d-inline-flex flex-row" style="width: auto;height: auto;">
              <div class="col d-inline-flex flex-column justify-content-center flex-nowrap"><span class="text-nowrap" id="goodsidText">商品编号：&nbsp; &nbsp;&nbsp;</span></div>
              <div class="col d-inline-flex flex-column justify-content-center"><span class="text-nowrap"id="goodsnumText">商品需出库数量：&nbsp; &nbsp;&nbsp;</span></div>
              <div class="col d-inline-flex flex-column justify-content-center"><span class="text-nowrap"id="goodsselectNumText">已选择出库数量：0&nbsp; &nbsp;&nbsp;</span></div>
              <div class="col d-inline-flex">
                <div class="btn-group d-inline-flex" role="group"><button class="btn btn-primary text-monospace text-nowrap" id="commit" type="button" style="width: 90px;">确认出库</button><button class="btn btn-primary text-monospace text-nowrap" id="goBack" type="button" style="margin-left: 5px;width: 90px;">返回</button></div>
              </div>
            </div>
          </div>
          <div class="card-body">
            <div class="table-responsive table mt-2" id="dataTable-1" role="grid" aria-describedby="dataTable_info">
              <table class="table my-0" id="dataTable">
                <thead style="height: 60px;text-align: center">
                <tr style="height: 60px;">
                  <th class="text-center" style="width: 50px;height: 60px;">序号<input type="checkbox" style="margin-left: 1px;"></th>
                  <th class="text-center"style="width: 100px;height: 60px;">库房名</th>
                  <th class="text-center"style="width: 100px;height: 60px;">货架名</th>
                  <th class="text-center"style="width: 100px;height: 60px;">数量</th>
                  <th class="text-center" style="width: 200px;">请输入本货架出库数量</th>
                </tr>
                </thead>
                <tbody id="outputTable" style="text-align: center">

                </tbody>
                <tfoot>
                <tr></tr>
                </tfoot>
              </table>
            </div>
            <div class="row">
              <div class="col-md-6 align-self-center">
                <p id="dataTable_info" class="dataTables_info" role="status" aria-live="polite">Showing 1 to 10 of 27</p>
              </div>
              <div class="col-md-6">
                <nav class="d-lg-flex justify-content-lg-end dataTables_paginate paging_simple_numbers">
                  <ul class="pagination">
                    <li class="page-item disabled"><a class="page-link" href="#" aria-label="Previous"><span aria-hidden="true">«</span></a></li>
                    <li class="page-item active"><a class="page-link" href="#">1</a></li>
                    <li class="page-item"><a class="page-link" href="#">2</a></li>
                    <li class="page-item"><a class="page-link" href="#">3</a></li>
                    <li class="page-item"><a class="page-link" href="#" aria-label="Next"><span aria-hidden="true">»</span></a></li>
                  </ul>
                </nav>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <footer class="bg-white sticky-footer">
      <div class="container my-auto">
        <div class="text-center my-auto copyright"><span>鄂ICP备2021022432号</span></div>
      </div>
    </footer>
  </div><a class="border rounded d-inline scroll-to-top" href="#page-top"><i class="fas fa-angle-up"></i></a></div>
<script src="/static/js/jquery.min.js"></script>
<script src="/static/bootstrap/js/bootstrap.min.js"></script>
<script src="/static/js/chart.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-easing/1.4.1/jquery.easing.js"></script>
<script src="/static/js/script.min.js"></script>
<script src="/static/js/jquery.session.js"></script>


<script>

  var orderid;
  var goodsid;
  var neednum;
  var selectnum = 0;


  // 初始化页面
  $(document).ready(function (){
    orderid = $("#orderid").val();
    goodsid = $("#goodsid").val();
    neednum = $("#num").val();
    $("#goodsidText").empty();
    $("#goodsnumText").empty();
    $("#goodsidText").append("商品编号："+goodsid+"&nbsp; &nbsp;&nbsp;");
    $("#goodsnumText").append("商品需出库数量："+neednum+"&nbsp; &nbsp;&nbsp;");
    $.ajax({
      url: "/stock/showGoodsSeat",
      type: 'post',
      data:{"goodsid":goodsid},
      dataType:"json",
      success:function (result){
        let str = "";
        for(let i = 0; i < result.length; i++){
          let j = i+1;
          str +="<tr><td  class=\"checkOrderId\"><input type=\"checkbox\" style=\"margin-left: 1px;\" class=\"checkOne\" name=\"checkbox\">" + j +"</td>" +
                  "<td class='houseid'>" + result[i].houseid + "</td>" +
                  "<td class='shelfid'>" + result[i].shelfid + "</td>" +
                  "<td class='seatnum'>" + result[i].seatnum + "</td>" +
                  "<td><input class=\"form-control number\" type=\"number\" style=\"text-align:center width: 350px; display:none;\" placeholder=\"请输入本货架出库数量\"name=\"number\"></td></tr>"
        }
        $("#outputTable").append(str);
      }
    })
  })


  $(function (){

    //不能为负，不能为0
    $("#outputTable").on("change",".number",function (event){
      var index = $(".number").index(this);
      var haveNum = $(".seatnum").eq(index).text();
      if(Number(haveNum) < Number(event.target.value)){
        $(".number").eq(index).val(0);
      }
      event.target.value = event.target.value.replace(/-/g,"");
      event.target.value = event.target.value.replace(/^0/g,"");

      selectnum = 0;
      for(let i = 0; i < $(".number").length; i++){
        selectnum = Number(selectnum) + Number($(".number").eq(i).val());
      }
      if(Number(selectnum) > Number(neednum)){
        $(".number").eq(index).val(null);
        alert("数量超出！");
        selectnum = 0;
        for(let i = 0; i < $(".number").length; i++){
          selectnum = Number(selectnum) + Number($(".number").eq(i).val());
        }
      }
      $("#goodsselectNumText").empty();
      $("#goodsselectNumText").append("已选择出库数量："+selectnum+"&nbsp; &nbsp;&nbsp;");
    })


    //判断是否勾选以显示和隐藏输入框
    $("#outputTable").on("click",".checkOne",function (){
      var index = $(".checkOne").index(this);
      var boolean = $('.checkOne').eq(index).is(':checked')
      if(boolean){
        $(".number").eq(index).show();
      }else{
        $(".number").eq(index).hide();
        $(".number").eq(index).val(null);
      }
      var boolean2 =  $(".number").eq(index).is(":hidden");
      if(boolean2){
        selectnum = 0;
        for(let i = 0; i < $(".number").length; i++){
          selectnum = Number(selectnum) + Number($(".number").eq(i).val());
        }
        $("#goodsselectNumText").empty();
        $("#goodsselectNumText").append("已选择出库数量："+selectnum+"&nbsp; &nbsp;&nbsp;");
      }
    })


  })

  // 确认出库
  $(function (){
    $("#commit").on("click",function (){
      if(selectnum < neednum){
        alert("输入数量不足");
      }else{
        var checkOnes = document.getElementsByClassName("checkOne");
        var houseid = [];
        var shelfid = [];
        var seatnum = [];
        var choosenum = [];
        var j = 0;
        for(var i = 0;i < checkOnes.length;i++){
          if(checkOnes[i].checked){
            houseid[j] = $(".houseid").eq(i).text();
            shelfid[j] = $(".shelfid").eq(i).text();
            seatnum[j] = $(".seatnum").eq(i).text();
            choosenum[j] = $(".number").eq(i).val();
            j++;
          }
        }
        if(window.confirm("确认出库吗？")){
          $.ajax({
            url: "/stock/output",
            type: 'post',
            data:{ "goodsid":goodsid,
              "orderid":orderid,
              "neednum":neednum,
              houseid:houseid,
              shelfid:shelfid,
              seatnum:seatnum,
              choosenum:choosenum},

            dataType:"json",
            traditional:true,
            success:function (result){
              alert("出库成功！");
              $(location).attr("href","/page/toOutwarehouse")
            }
          })
        }
      }
    })
  })

  $(function (){
    $("#goBack").on("click",function (){
      $(location).attr("href","/page/toOutwarehouse")
    })
  })

  //session
  $.session.set("url",window.location.href);

</script>

</body>

</html>